<template>
  <div class="section msg-section">
    <!--系统面板-->
    <yu-card class="user-info-card">
      <template #body>
        <list class="user-info-list" v-for="item in notice" :key="item.id">
          <template #left>
            <div class="inline-block">
              <div class="icon-item">
                <svg-icon :icon-class="item.icon" class-name="tab-bar-icon"></svg-icon>
                <van-badge v-if="item.nums" :content="item.nums" max="99" />
              </div>
              <span>{{ item.name }}</span>
            </div>
          </template>
          <template #right>
            <div>
              <van-icon name="arrow" />
            </div>
          </template>
        </list>
      </template>
    </yu-card>
    <!--好友消息面板-->
    <yu-card class="user-info-card friend-notice-card">
      <template #body>
        <div class="notice-list" v-for="notice in friendNotice" :key="notice.id">
          <div class="avatar">
            <img :src="notice.avatar" alt="" />
          </div>

          <div class="notice-info">
            <div class="top">
              <div class="user-name ellipsis">{{ notice.username }}</div>
              <div class="time">{{ notice.time }}</div>
            </div>
            <div class="bottom">
              <div class="notice-content ellipsis">{{ notice.msg }}</div>
            </div>
          </div>
        </div>
      </template>
    </yu-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import YuCard from '@/components/YuCard'
import list from '@/views/components/list/index.vue'
// import avatar from '@/assets/imgs/avatar.png'
import zcAvatar from '@/assets/imgs/zc-avatar.jpg'
import jbAvatar from '@/assets/imgs/jb-avatar.jpg'
import ttAvatar from '@/assets/imgs/tt-avatar.jpg'
import dsAvatar from '@/assets/imgs/ds-avatar.jpg'

const data = [
  {
    id: 1,
    name: '系统通知',
    icon: 'system-notice',
    nums: 200,
  },
  {
    id: 2,
    name: '账号消息',
    icon: 'notice',
    nums: 0,
  },
  {
    id: 3,
    name: '财务通知',
    icon: 'rmb',
    nums: 1,
  },
  {
    id: 4,
    name: '帖子通知',
    icon: 'msg',
    nums: 8,
  },
]
const msgs = [
  {
    id: 2,
    avatar: jbAvatar,
    username: '进宝',
    msg: '你好',
    time: '2024-01-04',
  },
]

const notice = ref(data)
const friendNotice = ref(msgs)
</script>

<style lang="scss" scoped>
.msg-section {
  .user-info-card {
    padding: 0;
    display: block;
    width: 100%;
    margin-bottom: 8px;
  }
  .user-info-list {
    height: 40px;
    padding: 10px 10px;
    box-sizing: content-box;
    .icon-item {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--yu-linear-bg-color-light);
      color: var(--yu-white-color);
      flex: 0 0 38px;
      margin-right: 16px;
      position: relative;
      .van-badge {
        position: absolute;
        //top: -4px;
        //right: -4px;
        top: 4px;
        right: 4px;
      }
      .svg-icon {
        width: 26px;
        height: 26px;
        margin-top: 7px;
      }
    }
    span {
      display: inline-block;
      font-size: 16px;
      flex: 1;
    }
    .inline-block {
      display: flex;
      -webkit-box-pack: justify;
      justify-content: space-between;
      -webkit-box-align: center;
      align-items: center;
      margin: 0 16px;
      font-size: 16px;
      line-height: 24px;
    }
  }
  .notice-list {
    -webkit-box-flex: 1;
    flex: 1 0 100%;
    width: 100%;
    padding-top: 16px;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: start;
    justify-content: flex-start;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    .avatar {
      -webkit-box-flex: 0;
      flex: 0 0 38px;
      height: 38px;
      width: 38px;
      margin-left: 8px;
      cursor: pointer;
      border-radius: 50%;
      overflow: hidden;
      box-shadow: var(--yu-border-shadow--light);
      img {
        width: 38px;
        height: 38px;
      }
    }
    .notice-info {
      flex: 1;
      overflow: hidden;
      padding-bottom: 16px;
      margin-right: 16px;
      font-size: 16px;
      border-bottom: 1px solid var(--yu-gray-color--light);
      margin-left: 8px;
      .top {
        display: -webkit-box;
        display: flex;
        -webkit-box-pack: justify;
        justify-content: space-between;
        height: 20px;
        .user-name {
          max-width: 120px;
          font-weight: 600;
          font-size: 14px;
          text-align: left;
          line-height: 20px;
          color: var(--yu-font-color--dark);
          cursor: pointer;
        }
        .time {
          font-weight: normal;
          font-size: 12px;
          line-height: 22px;
          text-align: left;
          color: var(--yu-gray-color);
        }
      }
      .bottom {
        position: relative;
        padding-top: 4px;
        font-size: 14px;
        color: var(--yu-gray-color);
        line-height: 20px;
        cursor: pointer;
        .notice-content {
          overflow: hidden;
          word-break: break-all;
          text-align: left;
          max-width: 320px;
        }
      }
    }
    &:last-child {
      .notice-info {
        border: none;
      }
    }
  }
}
</style>
